<template>
	<div class="home-banner">
		<el-carousel height="500px">
			<el-carousel-item v-for="b in bannerList" :key="b.id">
				<img :src="b.imgUrl" />
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	export default {
		name: 'HomeBanner',
	}
</script>

<script setup>
	import { ref, onMounted } from 'vue'
	import { reqHomeBannerData } from '@/apis/home'

	const bannerList = ref([])

	async function getHomeBannerData() {
		try {
			const res = await reqHomeBannerData()
			bannerList.value = res.result
		} catch (error) {
			ElMessage({
				type: 'error',
				message: error.response?.data?.error,
			})
		}
	}

	onMounted(() => {
		getHomeBannerData()
	})
</script>

<style scoped lang="scss">
	.home-banner {
		width: 1240px;
		height: 500px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 98;

		img {
			width: 100%;
			height: 500px;
		}
	}
</style>
